<template>
    <div>
        <van-nav-bar
            title="我要举报"
            left-arrow
            @click-left="onClickLeft"
            />
            
        <div class="report">
            <!-- 请选择举报类型 -->
            <div class="report_1">
                <h4>请选择举报类型</h4>
                <span>*</span>
            </div>
            <!-- 举报标签 -->
            <div class="report_2">
                <span :class="mg==true ? 'report_span':'color'" @click="mg = !mg">传播违法/敏感言论</span>
                <span :class="wb==true ? 'report_span':'color'" @click="wb = !wb">传播不实信息</span>
                <span :class="xj==true ? 'report_span':'color'" @click="xj = !xj" >虚假服务信息</span>
                <span :class="sq==true ? 'report_span':'color'" @click="sq = !sq">色情暴力</span>
                <span :class="wg==true ? 'report_span':'color'" @click="wg = !wg" >违规使用账号</span>
                <span :class="qh==true ? 'report_span':'color'" @click="qh = !qh" >侵害隐私</span>
                <span :class="qt==true ? 'report_span':'color'" @click="qt = !qt">其他举报</span>
            </div>
            <!-- 选择具体原因 -->
            <div class="report_3">
                <h4>请选择具体原因</h4>
                <span>*</span>
            </div>
            <!-- 举报描述 -->
            <div class="report_4">
                <div class="report_4s">
                    <h4>举报描述</h4>
                    <span>*</span>
                </div>
                <van-field
                    v-model="message"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="400"
                    placeholder="请输入留言"
                    show-word-limit
                    style="background-color: #eee;"
                    size="large"/>
            </div>
            <!-- 上传照片 -->
            <div class="report_5">
                <div class="report_5s">
                    <h4>上传照片</h4>
                    <span>最多9张</span>
                </div>
                <van-uploader v-model="fileList" multiple :max-count="9" />
            </div>
        </div>
        <!-- 按钮 提交 -->
        <div class="report_6">
        <button>提交</button>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: '',
                fileList:[],
                mg:true,
                wb:true,
                xj:true,
                sq:true,
                wg:true,
                qh:true,
                qt:true,
            }
            
        },
        methods:{
            onClickLeft() {
            this.$router.push('/customer')
            },
        }
    }
</script>

<style lang="scss" scoped>
// 选中字体变色
.color{
    background-color: #f03d37;
    color: white;
    margin: 5px;
    font-size: 15px;
    padding: 10px;
    border-radius: 15px;
    flex-grow:1;
}
.color2{
    background-color: #f03d37;
    color: white;
    margin: 5px;
    font-size: 15px;
    padding: 10px;
    border-radius: 15px;
    flex-grow:1;
}
.report{
    margin: 8px;
    padding: 10px;
    background-color: white;
}
.report_1{
    display: flex;
    align-items: center;
}
.report_1>h4{
    margin-right:5px;
}
.report_1>span{
    font-size: 15px;
    color: red;
}
/* 举报标签 */
.report_2{
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    text-align: center;

}
.report_span{
    background-color: #eee;
    margin: 5px;
    font-size: 15px;
    padding: 10px;
    border-radius: 15px;
    flex-grow:1;

}
/* 请选择具体原因 */
.report_3{
    display: flex;
    align-items: center;
    margin:18px 0;

}
.report_3>h4{
    margin: 5px 0;
}
.report_3>span{
    color: red;
}
.report_4>h4{
    margin: 20px 0;
}
.report_4s{
    display: flex;
    align-items: center;
    margin: 15px 0;
}
.report_4s>span{
    color: red;
}
/* 上传照片 */
.report_5{
    margin-top: 30px;
}
.report_5s{
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
}
.report_5s>span{
    margin-left: 5px;
    color: #aaa;
    font-size: 12px;
}
/* 按钮 */
.report_6{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
button{
    padding: 10px 140px;
    background-color: #ccc;
    border: none;
    border-radius: 20px;
}
</style>